<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>搜索</title>
		<link rel="stylesheet" type="text/css" href="../../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../../css/app.css" />
		<link rel="stylesheet" type="text/css" href="../../css/appOther.css"/>
		<style>
		</style>
	</head>

	<body id='app'>
		<header class="mui-bar mui-bar-nav">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">搜索结果</h1>
		</header>
		<div class="mui-content">
			<div id='wrapperAll' class="mui-scroll-wrapper">
				<div id='scrollAll' class="mui-scroll" data-type='all'>
					<ul class="mui-table-view app-hide">
						<li v-for="circle in allCircles" @tap='goCircle(circle.ID)' class="mui-table-view-cell">	
							<div @tap="join(circle, $event)" class="mui-btn mui-btn-primary btn-follow" style="top: 40%;right: 80px;">{{circle.joinStatus==0?"加入":(circle.joinStatus==1?"审核中":"退出")}}</div>
							<div @tap="follow(circle, $event)" class="mui-btn mui-btn-primary btn-follow" style="top: 40%;">{{circle.followStatus==0?"关注":"不关注"}}</div>
							<img :src="circle.Ciravatar" class="mui-pull-left circle-img" style="width: auto;"/>
							<p class="text_main label-title">{{circle.Cirname}}</p>						
							<p class="text_main text_hid">{{circle.Descrip}}</p>										
							<p class="text_submain mui-clearfix" style="padding-top: 5px;">						
								<span class="card_label-fl ">成员：{{circle.Membernum}}</span>
								<span class="card_label-fr">话题：{{circle.Topicnum}}</span>
							</p>											
						</li>
					</ul>
				</div>
			</div>
		</div>
		<script src="../../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui-extend.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui.pullToRefresh.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui.pullToRefresh.material.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/app.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.init();
			var vm = new Vue({
				el:'#app',
				data:{
					type:-1,
					keyword:'',
					paramObj: {
						PageSize: 6,
						CurPageAll: 1,
					},
					allCircles:[],
				},
				ready:function () {
					var me = this;
					ui.fixScroll(0);
					$('.app-hide').show();
					this.scrollAll = ui.setPullToRefresh('#wrapperAll', '#scrollAll', this.getAll);
					$.plusReady(function () {
						var current = plus.webview.currentWebview();
						me.type=current.type||-1;
						me.keyword = current.keyword||'';
						me.getAll(true);
						showPage(current);
					})
				},
				methods:{
					join: function(circleInfo,e){
						var me = this;
						e.stopPropagation();
						e.preventDefault();
						if(circleInfo.joinStatus == 0){
							ajax.post(api.circle.join,{ID: circleInfo.ID},function () {
								circleInfo.joinStatus=1;
							})
						}else if(circleInfo.joinStatus==1){
							return;
						}else if(circleInfo.joinStatus==2){
							mui.confirm("确定要退出圈子吗？","学园",["确定","取消"],function (e) {
								if(e.index === 0){
									ajax.post(api.circle.unJoin,{ID: circleInfo.ID},function () {
										circleInfo.joinStatus=0;
										me.getAll(true);
									})
								}
							});
						}
					},
					follow: function(circleInfo,e){
						console.log(circleInfo.followStatus);
						var me = this;
						e.stopPropagation();
						e.preventDefault();
						if(circleInfo.followStatus == 0){
							ajax.post(api.circle.follow,{ID: circleInfo.ID},function () {
								circleInfo.followStatus=1;
								me.getAll(true);
							})
						}else if(circleInfo.followStatus==1){
							mui.confirm("确定要取消关注吗？","学园",["确定","取消"],function (e) {
								if(e.index === 0){
									ajax.post(api.circle.unFollow,{ID: circleInfo.ID},function () {
										circleInfo.joinStatus=0;
										circleInfo.followStatus=0;
										me.getAll(true);
									})
								}
							});
						}
						
					},
					goCircle:function(cid){
						openPage('../circle/circle.html','circle',{cid: cid});
					},
					getAll:function(isRefresh){
						var self = this;
						var nomore = false;
						self.paramObj.CurPageAll = isRefresh?1:self.paramObj.CurPageAll+1;		// 当前页码
						
						ajax.post(api.circle.search,{
							PageSize: self.paramObj.PageSize,
							CurPage:self.paramObj.CurPageAll,
							type:self.type,
							keyword:self.keyword,
						},function (data) {
							self.allCircles = isRefresh ? data.Data:self.allCircles.concat(data.Data); 		// 拿到数据
							nomore = data.Data.length < self.paramObj.PageSize;
						},false,function () {
							ui.clearScrollAnimal(self.scrollAll.puller,isRefresh, nomore);
						})
					},
				},
			});
		</script>
	</body>

</html>